<template>
  <div class="app-container">
    <div class="app-title">
      查询条件
    </div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">关键字:</label>
        <el-input
          v-model="searchForm.titleOrCreateBy"
          placeholder="发布人,标题,内容"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">状态:</label>
        <el-select v-model="searchForm.status" placeholder="全部">
          <el-option value="0" label="上架" />
          <el-option value="1" label="下架" />
        </el-select>
      </div>
      <div class="searchItem">
        <el-button class="searchItembtn" type="primary" @click="search">
          {{ $t("common.view") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
        <el-button class="el-icon-folder-add searchItembtn" type="success" @click="addFrist">
          新增课件
        </el-button>
      </div>
    </div>
    <div class="app-title">
      课件列表
    </div>
    <table v-loading="loading" class="common-table">
      <thead>
        <tr>
          <td width="300px">一级标题</td>
          <td width="120px">优先级</td>
          <td width="150px">创建人</td>
          <td width="150px">创建时间</td>
          <td width="80px">状态</td>
          <td width="150px">{{ $t("table.operation") }}</td>
        </tr>
      </thead>
      <template v-for="(item, index) in tableData">
        <tr :key="item.id" @click="adds(index)">
          <!-- <el-tooltip
            effect="dark"
            :content="item.title"
          > -->
          <td style="font-weight: bolder">
            <el-Icon
              v-if="item.child.length === 0 || tableDataActive[index]"
              class="el-icon-arrow-right"
            />
            <el-Icon v-else class="el-icon-arrow-down" />

            {{ item.title }}
          </td>
          <!-- </el-tooltip> -->
          <td>{{ item.priority }}</td>
          <td>{{ item.createUser }}</td>
          <td>{{ item.createTime }}</td>
          <td>
            <el-tag v-if="item.status === 0" type="success">上架</el-tag>
            <el-tag v-else type="danger">下架</el-tag>
          </td>
          <td>
            <el-link
              v-has-permission="['agentLearn:update']"
              icon="el-icon-edit"
              @click.stop="updates(item)"
            >编辑</el-link>
            <el-link
              v-if="item.pid !== 0"
              v-has-permission="['agentLearn:view']"
              icon="el-icon-search"
              @click.stop="view(item)"
            >查看</el-link>
            <el-link
              v-if="item.status === 0"
              v-has-permission="['agentLearn:delete']"
              icon="el-icon-delete"
              @click.stop="deletes(item)"
            >下架</el-link>
            <el-link
              v-if="item.child !== null"
              icon="el-icon-folder-add"
              @click.stop="add(item)"
            >添加课件</el-link>
            <el-link
              v-has-no-permission="[
                'agentLearn:view',
                'agentLearn:update',
                'agentLearn:delete',
              ]"
              class="no-perm"
            >
              {{ $t("tips.noPermission") }}
            </el-link>
          </td>
        </tr>
        <tr
          v-for="myitem in item.child"
          :key="myitem.id"
          :class="{ hasChild: tableDataActive[index] }"
        >
          <td style="padding-left: 3em">{{ myitem.title }}</td>
          <td>{{ myitem.priority }}</td>
          <td>{{ myitem.createUser }}</td>
          <td>{{ myitem.createTime }}</td>
          <td>
            <el-tag v-if="myitem.status === 0" type="success">上架</el-tag>
            <el-tag v-else type="danger">下架</el-tag>
          </td>
          <td>
            <el-link
              v-has-permission="['agentLearn:update']"
              icon="el-icon-edit"
              @click.stop="updates(myitem)"
            >编辑</el-link>
            <el-link
              v-if="myitem.pid !== 0"
              v-has-permission="['agentLearn:view']"
              icon="el-icon-search"
              @click.stop="view(myitem)"
            >查看</el-link>
            <el-link
              v-if="myitem.status === 0"
              v-has-permission="['agentLearn:delete']"
              icon="el-icon-delete"
              @click.stop="deletes(myitem)"
            >下架</el-link>
            <el-link
              v-has-no-permission="[
                'agentLearn:view',
                'agentLearn:update',
                'agentLearn:delete',
              ]"
              class="no-perm"
            >
              {{ $t("tips.noPermission") }}
            </el-link>
          </td>
        </tr>
      </template>
      <template v-if="tableData.length===0">
        <tr>
          <td colspan="8" style="text-align:center"> 暂无数据</td>
        </tr>
      </template>

    </table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
    <!-- 新增课件 -->
    <el-dialog title="一级标题" :visible.sync="dialogVisible" width="30%">
      <el-form ref="myForm" :model="form" label-width="80px" :rules="myForm">
        <el-form-item label="一级标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="排序优先级" label-width="120px" prop="priority">
          <el-input v-model="form.priority" type="number" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="form.status" label="0">上架</el-radio>
          <el-radio v-model="form.status" label="1">下架</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('myForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看数据 -->
    <el-dialog title="详情" :visible.sync="lookDialogVisible" width="30%">
      <div class="content" style="overflow: hidden" v-html="viewContent" />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      show: false,
      searchForm: {
        titleOrCreateBy: '',
        status: ''
      },
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      loading: false,
      lookDialogVisible: false,
      tableKey: 0,
      tableData: [],
      tableDataActive: {},
      dialogVisible: false,
      form: {
        content: '',
        priority: '',
        title: '',
        status: ''
      },
      viewContent: '',
      myForm: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        priority: [
          { required: true, message: '请输入优先级', trigger: 'blur' }
        ]
      },
      pid: 0
    }
  },
  created() {
    this.search()
  },
  methods: {
    adds(item) {
      const id = this.tableData[item].id
      if (this.tableData[item].child.length === 0) {
        this.$get('/web/courseware/list/children?id=' + id).then((res) => {
          this.$nextTick(() => {
            if (res.data.code === '0') {
              if (res.data.data[0].child.length === 0) {
                this.$message({
                  type: 'error',
                  message: '没有二级课件',
                  duration: 1000
                })
                return
              }
              this.$set(this.tableData, item, {
                ...this.tableData[item],
                child: res.data.data[0].child
              })
              // this.$set(this.tableDataActive, item, { item: this.tableDataActive[item] })
            }
          })
        })
      } else {
        this.tableDataActive[item] = !this.tableDataActive[item]
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 一级标题
          if (!this.form.id) {
            this.$post(
              '/web/courseware',
              { ...this.form, pid: 0 },
              'json'
            ).then((res) => {
              if (res.data.code === '0') {
                this.$message.success(this.$t('tips.createSuccess'))
                this.dialogVisible = false
                this.search()
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else {
            // 编辑一级标题
            this.$put('/web/courseware', { ...this.form, pid: 0 }, 'json').then(
              (res) => {
                if (res.data.code === '0') {
                  this.search()
                  this.$message.success(this.$t('tips.updateSuccess'))
                  this.dialogVisible = false
                } else {
                  this.$message.error(res.data.message)
                }
              }
            )
          }
        } else {
          return false
        }
      })
    },
    search(e) {
      this.loading = true
      if (e && e.page) {
        this.pagination.pageSize = e.limit
        this.pagination.pageNum = e.page
      }
      this.$get('/web/courseware/list', {
        ...this.pagination,
        ...this.searchForm
      })
        .then((res) => {
          if (res.data.code === '0') {
            this.loading = false
            this.tableData = res.data.data.rows
            this.tableData.forEach((item, i) => {
              item.child = []
              // this.tableDataActive[i] = false
              this.$set(this.tableDataActive, i, false)
            })
            // this.$set(this.tableDataActive)
            // console.log(this.tableDataActive)
            this.total = res.data.data.total
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.searchForm = {}
      this.search()
    },
    view(row) {
      this.lookDialogVisible = true
      this.viewContent = row.content
    },
    deletes({ id }) {
      this.$confirm('是否要下架该课件?', this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          this.$put(`/web/courseware/update/status`, { id, status: 1 }).then(
            (res) => {
              if (res.data.code === '0') {
                this.$message.success('下架成功')
                this.reset()
              } else {
                this.$message.error(res.data.message)
              }
            }
          )
        })
        .catch(() => {})
    },
    updates(row) {
      if (row.child === null) {
        this.$router.push({
          name: 'addAgentLearn',
          query: { id: row.id }
        })
      } else if (row.pid !== 0) {
        this.$router.push({
          name: 'addAgentLearn',
          query: { id: row.id, pid: row.pid }
        })
      } else {
        this.dialogVisible = true
        const { content, id, pid, priority, title } = row
        this.form = {
          content,
          id,
          pid,
          priority,
          title,
          status: String(row.status)
        }
      }
    },
    add(row) {
      this.$router.push({
        name: 'addAgentLearn',
        query: { id: row.id }
      })
    },
    addFrist() {
      this.dialogVisible = true
      this.pid = 0
      this.form = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.common-table {
  width: 100%;
  table-layout: fixed;
  font-size: 14px;
  color: #252631;
  line-height: 20px;
  td {
    padding: 15px 6px;
    border: 1px solid #e8ecef;
  }
  th {
    border: 1px solid #e8ecef;
  }
  tr {
    cursor: pointer;
  }
  thead {
    font-size: 12px;
    color: #606266;
    font-weight: 600;
    td {
      padding: 14px 6px;
    }
    tr {

      border: 1px solid #e8ecef;
    }
  }
}
.hasChild {
  height: 0;
  overflow: hidden;
  display: none;
  transition: all 1s;
}
.slide-fade-enter-active {
  transition: all 0.2s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(15px);
  opacity: 0;
}
</style>
